<template>
  <div class="idfrdetalis">
    <div class="tit">
      <span class="goback" style="font-size: .2rem;font-weight: 700;">鉴定结果</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">{{ name }}</span>

      <div style="position: absolute;right: .4rem;">
        <el-button @click="goback" size="small">返回</el-button>
      </div>
    </div>
    <div class="idfrbox">
      <div class="imgbox" id="vidf">
        <img v-if="isMp4(obj.accessorySrc) == '照片'" :src="obj.accessorySrc" alt="">
        <video v-if="isMp4(obj.accessorySrc) == '视频'" :src="obj.accessorySrc" id="vid" controls autoplay></video>

      </div>
      <div class="idfrlist">
        <div class="idfrtit">
          <span style="margin-left: .2rem;font-size: .16rem">照片列表</span>
          <span style="margin-left: .1rem;">{{ imageNum }}照片</span>
          <span style="margin-left: .1rem;">{{ videoNum }}视频</span>
        </div>
        <div class="frlist">
          <div class="listhead">
            <div @click="issort" style="margin-right: .2rem;">
              <span>时间排序</span>
              <span class="el-icon-sort"></span>
            </div>
            <div>
              <span>类型选择：</span>
            </div>
            <el-select style="width: 1.5rem;" @change="choosedata" v-model="type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <div style="margin-left: .2rem;">
              <span>质量选择：</span>
            </div>
            <el-select style="width: 1.5rem;" @change="choosedata" v-model="imageQuality" placeholder="请选择">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style=" height: calc(100% - .7rem);overflow-y:auto ">
            <div class="frmessage" v-for="(lis, index) in list" @click="lookta(lis, index)"
              :style="lis.color ? 'background-color: #fff;' : 'background-color: #f4f6f8;'">
              <div style="width: 40%;">
                &nbsp;
                <span
                  :class="isMp4(lis.accessorySrc) == '视频' ? 'el-icon-video-camera' : 'el-icon-picture-outline'"></span>
                &nbsp;
                <span>{{ lis.shootingTime }}</span>
              </div>
              <div style="width: 40%;">
                <span>{{ lis.imageName }}</span>
              </div>
              <div>
                <span>{{ lis.imageQuality }}</span>
                <span class="el-icon-delete" @click.stop="idsDelete(lis, index)"
                  style="margin-left: 18px;color: red;"></span>
              </div>
            </div>
          </div>


        </div>
      </div>
    </div>
    <div class="idfrset">
      <div @click="opendw(obj.lon, obj.lat)">
        <span style="color: #FCAA2E" class="el-icon-location"></span>
        <span>经度：{{ obj.lon }}，纬度：{{ obj.lat }}</span>
        <span>网格编号：{{ obj.oneKmGridNum }}</span>
      </div>

      <div style="margin-left: .4rem;" @click="openisidfrcompile" v-if="abilityList.indexOf('edit') != -1">
        <span style="color: #00CC46" class="el-icon-edit-outline"></span>
        <span>编辑</span>
      </div>
      <div style="position: absolute;left: 7.3rem">
        <span style="color: #00CC46" class="el-icon-picture-outline" v-if="abilityList.indexOf('edit') != -1"></span>
        <span style="margin-right: .4rem;" @click="setfm" v-if="abilityList.indexOf('edit') != -1">设为封面</span>
        <span style="color: #00CC46" class="el-icon-download" v-if="abilityList.indexOf('downLoad') != -1"></span>
        <a :download="obj.imageName" :href="'/iapi/mediaDownLoad/download?id=' + obj.id" target="_blank"
          v-if="abilityList.indexOf('downLoad') != -1">下载照片</a>
        <!--<span></span>-->
      </div>

    </div>
    <!--编辑-->
    <div class="idfrcompile" v-show="isidfrcompile">
      <div>
        <div style="text-align: center;margin: .2rem 0 ">
          <span style="font-size: .2rem">修改信息</span>
        </div>
        <el-form style="width: 90%;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px"
          class="demo-ruleForm">
          <el-form-item label="拍摄时间" required>
            <!--prop="date"-->
            <el-form-item>
              <el-date-picker type="datetime" placeholder="选择拍摄时间" v-model="ruleForm.shootingTime"
                :default-value="c_time(ruleForm.shootingTime)" @change="gettime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>

          <el-form-item label="物种类别" prop="objType">
            <el-radio-group v-model="ruleForm.objType">
              <el-radio label="兽类"></el-radio>
              <el-radio label="鸟类"></el-radio>
              <el-radio label="两栖"></el-radio>
              <el-radio label="其他"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="物种名称" prop="speciesName">
            <el-col :span="14">
              <el-autocomplete style="width: 100%;" class="inline-input" :fetch-suggestions="querySearch" @input="sec"
                placeholder="请输入物种名称" v-model="ruleForm.speciesName"></el-autocomplete>
            </el-col>
            <!--<el-col class="line" :span="1">&nbsp;</el-col>-->
            <el-col :span="10">
              <el-form-item label="无法鉴定">
                <el-switch @change="unableIdentifyFun" v-model="delivery"></el-switch>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="鉴定人" prop="identifyPeople">
            <el-input v-model="ruleForm.identifyPeople"></el-input>
          </el-form-item>
          <el-form-item label="照片编号" prop="imageName">
            <el-input v-model="ruleForm.imageName"></el-input>
          </el-form-item>
          <el-form-item label="照片质量" prop="imageQuality">
            <el-select style="width: 100%;" v-model="ruleForm.imageQuality" placeholder="请选择照片质量">
              <el-option label="低" value="低"></el-option>
              <el-option label="中" value="中"></el-option>
              <el-option label="高" value="高"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物种数量" prop="animalNum">
            <el-input v-model="ruleForm.animalNum"></el-input>
          </el-form-item>
          <el-form-item label="物种性别" prop="speciesGender">
            <el-radio-group v-model="ruleForm.speciesGender">
              <el-radio label="雄"></el-radio>
              <el-radio label="雌"></el-radio>
              <el-radio label="雄雌都有"></el-radio>
              <el-radio label="难以辨别"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="温度(℃)" prop="temperature">
            <el-input v-model="ruleForm.temperature"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <!--<el-form-item>-->
          <!--<el-button type="primary" @click="submitForm('ruleForm')">保存鉴定</el-button>-->
          <!--&lt;!&ndash;<el-button @click="resetForm('ruleForm')">重置</el-button>&ndash;&gt;-->
          <!--</el-form-item>-->
        </el-form>

        <div style="margin: .4rem 0;display: flex;justify-content: center">
          <div class="idfrbtn" style="margin-right: .2rem;" @click="isidfrcompile = false">
            <span>取消</span>
          </div>

          <div class="idfrbtn2" style="margin-right: .2rem;" @click="submitForm('ruleForm')">
            <span>确认修改</span>
          </div>
        </div>

      </div>
    </div>
    <!--编辑-->

    <!--地图弹窗 B-->
    <div class="mappup" v-if="xsdw">

      <div class="close">
        <img @click="xsdw = false" src="/static/images/icon/close.png" alt="">
      </div>
      <div class="mapbox">
        <Bmap ref='baseMap'></Bmap>
      </div>

    </div>
    <!--地图弹窗 E-->


  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'
import Bmap from './Map'

export default {
  name: 'parent',
  components: {
    'Bmap': Bmap
  },
  data() {
    return {
      xsdw: false,
      isidfrcompile: false,
      delivery: false,
      //模糊搜索
      restaurants: [],
      objs: null,
      abilityList: [],
      ruleForm: {
        id: "",
        shootingTime: '',//拍摄时间
        objType: '兽类',
        speciesName: '',//物种名称
        identifyPeople: "",//鉴定人
        imageName: "",//照片编号
        imageQuality: "",//照片质量
        animalNum: 1,//物种数量
        speciesGender: "",//物种性别
        temperature: '',//温度
        remark: ''
      },
      rules: {
        date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        speciesName: [
          { required: true, message: '请输入物种名称', trigger: 'blur' }
        ],
        identifyPeople: [
          { required: true, message: '请输入鉴定人姓名', trigger: 'blur' }
        ],
        imageName: [
          { required: true, message: '请输入照片编号', trigger: 'blur' }
        ],
        imageQuality: [
          { required: true, message: '请选择照片质量', trigger: 'blur' }
        ],
        animalNum: [
          { required: true, message: '数量不能不能为空', trigger: 'blur' }
        ],
        objType: [
          { required: true, message: '请选择物种类别', trigger: 'blur' }
        ],
        speciesGender: [
          { required: true, message: '请选择物种性别', trigger: 'blur' }
        ],
      },
      obj: {
        accessorySrc: "",
        lon: "",
        lat: ""
      },
      sort: 0,
      name: "",
      areaId: "",
      options: [{
        value: 2,
        label: '全部'
      }, {
        value: 0,
        label: '图片'
      }, {
        value: 1,
        label: '视频'
      }],
      option: [{
        value: '',
        label: '全部'
      }, {
        value: '高',
        label: '高'
      }, {
        value: '中',
        label: '中'
      }, {
        value: '低',
        label: '低'
      }],
      type: 2,
      imageQuality: "",
      list: [],
      imageNum: 0,
      videoNum: 0,
      listNum: 0,
      inxid: 0,
      change_time: "",
    }
  },
  mounted() {
  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
    this.abilityList = sessionStorage.getItem('abilityList')
    this.name = this.$route.query.name;
    this.getdata();

  },
  methods: {
    idsDelete(item, index) {
      let vm = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        (async function () {
          let res = await http.post(api.infrared.imageIdentifyDelete,
            { id: item.id }
          )
          if (res.data.message == 'success') {
            vm.$message({
              message: '删除成功！',
              type: 'success'
            });
            vm.list.splice(index, 1)
            if (vm.list[index]) {
              vm.lookta(vm.list[index], index)
            }

          } else {
            vm.$message.error('删除失败，请重试！');
          }
        })()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    opendw(lon, lat) {
      this.xsdw = true;
      let vm = this;
      setTimeout(function () {
        vm.$refs.baseMap.creationMap();
        let arr = [{
          id: 'jiandingjieguo',
          name: "",
          borderColor: "#ffffff",
          fillColor: "#dd2c00",
          data: {},
          geojson: { coordinates: [lon, lat], type: "Point" }
        }];
        vm.$refs.baseMap.previewshape(arr, "alread_Point");
      }, 500)
    },
    //判断文件类型
    isMp4(m) {
      let iv = m.split('.');
      if (iv[iv.length - 1].toLowerCase() == 'mp4') {
        return '视频'
      } else {
        return '照片'
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.shootingTime == '') {
            alert('拍摄时间不能为空');
            return false
          }

          var obj = Object.assign({}, this.ruleForm);
          //            obj.shootingTime = this.change_time;
          var vm = this;
          (async function () {
            let res = await http.post(api.infrared.compile, obj)
            if (res.data.message == 'error') {
              vm.open3(res.data.error)
            } else {
              vm.refdata();
              vm.open2('修改完成');
              vm.isidfrcompile = false;
            }
          })()
        } else {
          //            console.log('error submit!!');
          return false;
        }
      });
    },
    openisidfrcompile() {
      this.isidfrcompile = true;
    },
    //无法鉴别
    unableIdentifyFun() {
      if (this.delivery) {
        this.ruleForm.speciesName = "无法鉴定"
      } else {
        this.ruleForm.speciesName = ""
      }
    },
    //模糊搜索
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      if (restaurants.length > 0) {
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    },
    //模糊搜索2
    createFilter() {
      return (restaurant) => {
        return (restaurant.value.toLowerCase());
      };
    },
    //模糊搜索3
    loadAll() {
      return this.obj;
    },
    //模糊搜索4
    sec() {
      var vm = this;
      (async function () {
        let res = await http.get(api.queryByInput, {
          areaId: vm.areaId,
          type: vm.ruleForm.objType,
          input: vm.ruleForm.speciesName
        })
        var arr = [];
        if (res.data.length == 0) {
          vm.obj = [{ value: "暂无数据，建议更换关键字" }];
          vm.restaurants = vm.loadAll();
        } else {
          if (res.data.length > 0) {
            res.data.forEach((e => {
              var z = {
                value: e
              }
              arr.push(z);
            }))
            vm.obj = arr;
            vm.restaurants = vm.loadAll();
          }
        }
      })()
    },
    //时间处理
    c_time(e) {
      var a = (new Date(e))
      return a;
    },
    //获取时间
    gettime(datetime) {
      if (datetime != null) {
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var Hours = datetime.getHours();
        var Minutes = datetime.getMinutes();
        var Seconds = datetime.getSeconds();

        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        if (Hours >= 1 && Hours <= 9) {
          Hours = "0" + Hours;
        }
        if (Minutes >= 0 && Minutes <= 9) {
          Minutes = "0" + Minutes;
        }
        if (Seconds >= 1 && Seconds <= 9) {
          Seconds = "0" + Seconds;
        }
        var t1 = year + "/" + month + "/" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
        this.change_time = t1;
      } else {
        this.change_time = ''
      }

    },
    setfm() {
      let vm = this;
      (async function () {
        let res = await http.post(api.infrared.surfacePlot + "?id=" + vm.obj.id)
        if (res.data.code == '200') {
          vm.open2('设置成功')
        } else {
          vm.open3("设置失败，请稍后再试")
        }
      })()
    },
    open2(text) {
      this.$message({
        message: text,
        type: 'success'
      });
    },
    open3(text) {
      this.$message({
        message: text,
        type: 'warning'
      });
    },
    lookta(t, index) {
      this.list.forEach(k => {
        k.color = false;
      })
      t.color = true;
      this.inxid = t.id;
      this.obj = Object.assign({}, t);
      this.ruleForm = Object.assign({}, t);
    },
    refdata() {
      let vm = this;
      (async function () {
        let res = await http.get(api.infrared.authenticateInfo + '?sort=' + vm.sort + "&type=" + vm.type + "&imageQuality=" + vm.imageQuality + "&areaId=" + vm.areaId + "&name=" + vm.name)
        if (res.data.code == '200') {
          res.data.data.forEach((e, index) => {
            if (e.id == vm.inxid) {
              e["color"] = true
            } else {
              e["color"] = false
            }
          })
          vm.list = res.data.data;
        }
      })()
    },
    //原图展示
    masterMap(p) {
      let arr = p.split("/");
      let str = 'orginal_' + p.split("/")[p.split("/").length - 1];
      arr[arr.length - 1] = str;
      arr = arr.join('/');
      return '/iapi' + arr;
    },
    isMp4(m) {
      if (m != "" && m != undefined && m != null) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      }
    },
    issort() {
      if (this.sort == 0) {
        this.sort = 1;
        this.getdata();
        return false
      }
      if (this.sort == 1) {
        this.sort = 0
        this.getdata();
        return false
      }
    },
    choosedata() {
      this.getdata();
    },
    getdata() {
      let vm = this, userName = this.$route.query.userName;
      (async function () {
        let res = await http.get(api.infrared.authenticateInfo + '?sort=' + vm.sort + "&type=" + vm.type + "&imageQuality=" + vm.imageQuality + "&areaId=" + vm.areaId + "&name=" + vm.name + '&userName=' + userName)
        if (res.data.code == '200') {
          res.data.data.forEach((e, index) => {
            if (index == 0) {
              e["color"] = true
            } else {
              e["color"] = false
            }
          })
          vm.list = res.data.data;
          vm.obj = Object.assign({}, res.data.data[0]);
          console.log(2)
          vm.ruleForm = Object.assign({}, res.data.data[0]);
          vm.imageNum = res.data.data[0].imageNum;
          vm.videoNum = res.data.data[0].videoNum;
          vm.listNum = res.data.data[0].listNum;
        }

      })()
    },
    goback() {
      this.$router.push('/identificationResult')
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === 'identificationResult') {
      to.meta.keepAlive = true
    }
    next()
  }
}
</script>
<style scoped>
@import "../../static/css/idfrdetalis.css";
</style>
